/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/page.tsx
 * Description: Home page — hero, introduction, commitments, services overview, method strip, call to action
 */

import type { Metadata } from "next";
import Link from "next/link";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.home.title }, description: meta.home.description };
}

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const typedLocale = locale as Locale;
  const messages = getMessages(typedLocale);
  const { home, services } = messages;

  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-24 sm:py-36">
          <p className="mb-5 font-mono text-xs uppercase tracking-[0.3em] text-accent">
            {home.heroKicker}
          </p>
          <h1 className="max-w-4xl font-display text-4xl font-semibold leading-[1.08] tracking-tight text-ink sm:text-6xl">
            {home.heroTitle}
          </h1>
          <p className="mt-8 max-w-2xl text-lg leading-relaxed text-ink-soft">
            {home.heroLead}
          </p>
          <div className="mt-10 flex flex-wrap gap-4">
            <Link
              href={`/${typedLocale}/contact`}
              className="rounded-full bg-ink px-7 py-3 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
            >
              {home.heroCtaPrimary}
            </Link>
            <Link
              href={`/${typedLocale}/services`}
              className="rounded-full border border-line-strong px-7 py-3 text-sm font-medium text-ink transition-colors hover:border-accent hover:text-accent"
            >
              {home.heroCtaSecondary}
            </Link>
          </div>
        </Container>
      </section>

      {/* Stats band */}
      <section className="border-b border-line bg-paper-2">
        <Container>
          <dl className="grid grid-cols-1 divide-y divide-line sm:grid-cols-3 sm:divide-x sm:divide-y-0">
            {[
              { value: "8", label: home.statsProjects },
              { value: "2", label: home.statsLanguages },
              { value: "8", label: home.statsSteps },
            ].map((stat) => (
              <div key={stat.label} className="px-2 py-9 text-center">
                <dd className="font-display text-4xl font-semibold text-accent">
                  {stat.value}
                </dd>
                <dt className="mt-1 text-sm text-ink-faint">{stat.label}</dt>
              </div>
            ))}
          </dl>
        </Container>
      </section>

      {/* Introduction */}
      <section className="py-20 sm:py-28">
        <Container>
          <SectionHeading title={home.introTitle} />
          <div className="mt-8 grid gap-8 lg:grid-cols-2">
            <p className="leading-relaxed text-ink-soft">{home.introBody1}</p>
            <p className="leading-relaxed text-ink-soft">{home.introBody2}</p>
          </div>
          <div className="mt-10 flex flex-wrap gap-6">
            <Link
              href={`/${typedLocale}/about`}
              className="text-sm font-medium text-accent hover:text-accent-strong"
            >
              {home.introLinkAbout} →
            </Link>
            <Link
              href={`/${typedLocale}/founders`}
              className="text-sm font-medium text-accent hover:text-accent-strong"
            >
              {home.introLinkFounders} →
            </Link>
          </div>
        </Container>
      </section>

      {/* Commitments */}
      <section className="border-t border-line bg-paper-2 py-20 sm:py-28">
        <Container>
          <SectionHeading title={home.whyTitle} lead={home.whyLead} />
          <ul className="mt-12 grid gap-4 sm:grid-cols-2">
            {home.why.map((item, index) => (
              <li
                key={item.title}
                className="rounded-2xl border border-line bg-card p-8"
              >
                <p className="font-mono text-sm text-accent">
                  {String(index + 1).padStart(2, "0")}
                </p>
                <h3 className="mt-3 font-display text-xl font-semibold text-ink">
                  {item.title}
                </h3>
                <p className="mt-3 leading-relaxed text-ink-soft">{item.body}</p>
              </li>
            ))}
          </ul>
        </Container>
      </section>

      {/* Services overview */}
      <section className="py-20 sm:py-28">
        <Container>
          <SectionHeading title={home.servicesTitle} lead={home.servicesLead} />
          <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {services.items.map((service, index) => (
              <li key={service.id}>
                <Link
                  href={`/${typedLocale}/services#${service.id}`}
                  className="group block h-full rounded-2xl border border-line bg-card p-6 transition-colors hover:border-accent"
                >
                  <p className="font-mono text-xs text-ink-faint">
                    {String(index + 1).padStart(2, "0")}
                  </p>
                  <h3 className="mt-3 text-base font-semibold text-ink group-hover:text-accent">
                    {service.title}
                  </h3>
                </Link>
              </li>
            ))}
          </ul>
          <div className="mt-10">
            <Link
              href={`/${typedLocale}/services`}
              className="text-sm font-medium text-accent hover:text-accent-strong"
            >
              {home.servicesCtaAll} →
            </Link>
          </div>
        </Container>
      </section>

      {/* Method strip */}
      <section className="border-t border-line bg-ink py-16 sm:py-20">
        <Container className="flex flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between">
          <div className="max-w-2xl">
            <h2 className="font-display text-2xl font-semibold tracking-tight text-paper sm:text-3xl">
              {home.processTitle}
            </h2>
            <p className="mt-3 leading-relaxed text-paper/70">{home.processBody}</p>
          </div>
          <Link
            href={`/${typedLocale}/about`}
            className="shrink-0 rounded-full border border-paper/30 px-6 py-2.5 text-sm font-medium text-paper transition-colors hover:border-paper hover:bg-paper hover:text-ink"
          >
            {home.processLink}
          </Link>
        </Container>
      </section>

      {/* Call to action */}
      <section className="py-20 sm:py-28">
        <Container className="text-center">
          <h2 className="font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
            {home.ctaTitle}
          </h2>
          <p className="mx-auto mt-5 max-w-2xl leading-relaxed text-ink-soft">{home.ctaBody}</p>
          <Link
            href={`/${typedLocale}/contact`}
            className="mt-9 inline-block rounded-full bg-ink px-8 py-3.5 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
          >
            {home.ctaButton}
          </Link>
        </Container>
      </section>
    </>
  );
}